import React, { useRef, useState } from 'react';
/**
 * 1、组建在重新渲染时，useRef不会被重新初始化
 * 2、改变ref.current的属性时组建不会重新渲染。react不知道他什么时候发生变化，他只是普通javascript对象
 * 3、useref的值不能作为useeffect的依赖
 * 4、useref不能直接获取组建的实例，要用useforwardref
 * @returns useRef学习
 */
// let timer: any = null;//写在这里可以解决但不是最佳，推荐useref
const Timer = () => {
    // let timer: any = null;//写在这里每次setstate后组建重新渲染，timer为null，end无从clear
    let timer = useRef(null)
    const [count, setCount] = useState(0);
    const start = () => {
        timer.current = setInterval(() => {
            setCount((pre) => pre + 1);
        }, 100);
    };
    const end = () => {
        clearInterval(timer.current);
    };
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={start}>start</button>
            <button onClick={end}>end</button>
        </div>
    );
};
export default Timer;
